<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-left" @click="goBack">
        <text class="iconfont">&#xe603;</text>
      </view>
      <view class="nav-center">
        <text class="nav-title">打印机搜索</text>
      </view>
      <view class="nav-right">
        <view class="nav-icons">
          <text class="iconfont">&#xe604;</text>
        </view>
      </view>
    </view>

    <!-- 搜索区域 -->
    <view class="search-container">
      <view class="search-input">
        <input
            v-model="serialNumber"
            placeholder="请输入打印机序列号"
            type="text"
            @input="handleInput"
        />
        <text class="search-icon" @click="searchPrinter">🔍</text>
      </view>
    </view>

    <!-- 打印机列表 -->
    <view class="printer-list">
      <view v-if="loading" class="loading-text">
        正在搜索...
      </view>

      <view v-else-if="printers.length === 0" class="no-printer">
        <text class="no-printer-text">未找到打印机</text>
      </view>

      <view v-for="(printer, index) in printers" v-else
            :key="index"
            class="printer-item"
            @click="selectPrinter(printer)">
        <view class="printer-info">
          <text class="printer-name">{{ printer.serialNumber }}</text>
          <text class="printer-status">状态: {{ printer.authentication === 1 ? '已认证' : '未认证' }}</text>
        </view>
        <view class="select-btn">
          <text>选择</text>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <button class="btn-primary" @click="clearSearch">清空</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      serialNumber: '',
      loading: false,
      printers: []
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },

    handleInput() {
      // 输入时实时搜索
      if (this.serialNumber.length >= 6) {
        this.searchPrinter();
      }
    },

    searchPrinter() {
      if (!this.serialNumber) {
        uni.showToast({
          title: '请输入序列号',
          icon: 'none'
        });
        return;
      }

      this.loading = true;

      // 模拟API调用
      setTimeout(() => {
        // 这里应该调用实际的API
        this.getPrintersBySerialNumber(this.serialNumber);
        this.loading = false;
      }, 800);
    },

    getPrintersBySerialNumber(serialNumber) {
      // 模拟从后端获取数据
      // 实际项目中这里应该是API调用
      const mockData = [
        {
          id: 1,
          serialNumber: serialNumber,
          authentication: 1,
          isUsed: 1
        }
      ];

      this.printers = mockData;
    },

    selectPrinter(printer) {
      // 将选中的打印机信息传递回上一页
      uni.setStorageSync('selectedPrinter', printer);
      uni.navigateBack();
    },

    clearSearch() {
      this.serialNumber = '';
      this.printers = [];
    }
  },
  onShow() {
    // 页面显示时清空之前的搜索结果
    this.printers = [];
  }
}
</script>

<style>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  background-color: #27ae60;
  color: white;
  padding: 0 30rpx;
  position: relative;
}

.nav-left, .nav-right {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-center {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
}

.nav-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 60rpx;
}

.iconfont {
  font-size: 36rpx;
}

.search-container {
  padding: 30rpx;
  background-color: white;
}

.search-input {
  display: flex;
  align-items: center;
  border: 1rpx solid #ddd;
  border-radius: 16rpx;
  overflow: hidden;
}

.search-input input {
  flex: 1;
  padding: 20rpx;
  font-size: 28rpx;
  outline: none;
  border: none;
}

.search-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #27ae60;
  color: white;
  font-size: 32rpx;
  cursor: pointer;
}

.printer-list {
  padding: 30rpx;
  background-color: #f5f5f5;
}

.loading-text {
  text-align: center;
  color: #666;
  font-size: 28rpx;
  padding: 40rpx 0;
}

.no-printer {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  padding: 60rpx 0;
}

.printer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.printer-info {
  flex: 1;
}

.printer-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.printer-status {
  font-size: 24rpx;
  color: #27ae60;
}

.select-btn {
  width: 120rpx;
  height: 60rpx;
  background-color: #27ae60;
  color: white;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
}

.bottom-actions {
  padding: 30rpx;
  display: flex;
  justify-content: center;
}

.btn-primary {
  width: 200rpx;
  height: 80rpx;
  background-color: #27ae60;
  color: white;
  font-size: 32rpx;
  border-radius: 16rpx;
  line-height: 80rpx;
}
</style>
